<template>
	<view class="user-stored-list" :style="{background:pageColor}" v-if="isLoad">
		<view class="space-md"></view>
		<view class="fill-base flex-between ml-md mr-md radius-16" style="color:#2E3541;padding:50rpx 30rpx">
			<view class="f-mini-title text-bold">充值金额</view>
			<view class="flex-center f-caption"><input v-model="cash" type="digit" class="f-md-title text-right mr-md"
					placeholder="请输入充值金额" />元
			</view>
		</view>
		<view class="fill-base mt-md ml-md mr-md pd-lg radius-16" style="color:#2E3541">
			<view class="f-mini-title text-bold">请选择支付方式</view>
			<view @tap.stop="payInd = index" class="flex-between mt-lg" v-for="(item,index) in payList" :key="index">
				<view class="pay-item flex-y-center">
					<i class="iconfont mr-md" :class="[item.icon]" :style="{color:item.color}"
						style="font-size:60rpx"></i>
					<view class="flex-y-baseline f-desc">{{item.title}}
					</view>
				</view>
				<i class="pay-icon iconfont c-caption"
					:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':payInd == index}]"
					:style="{color:payInd==index?primaryColor:'#BEC3CE'}" style="font-size: 40rpx;"></i>
			</view>
		</view>
		<view class="space-max-footer"></view>
		<fix-bottom-button @confirm="toPay" :text="[{text:'立即支付',type:'confirm'}]" bgColor="#fff">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				color: '#ffffff',
				payList: [],
				payInd: 0,
				cash: '',
				lockTap: false,
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			isGzhLogin: state => state.user.isGzhLogin,
		}),
		async onLoad() {
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
			this.$util.showLoading()
			await this.initIndex()
		},
		onShow() {
			// #ifdef APP-PLUS
			var args = plus.runtime.arguments
			if (args == 'wechat-adapay-suc') {
				this.$util.back()
				this.$util.goUrl({
					url: 1,
					openType: `navigateBack`
				})
			}
			plus.runtime.arguments = null
			plus.runtime.arguments = ""
			// #endif
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updateOrderItem', 'updateUserItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				let {
					alipay_status = 0,
						app_wechat_pay = 0
				} = this.configInfo
				let weixinInd = this.payList.findIndex(item => {
					return item.id == 1
				})
				if (app_wechat_pay && weixinInd == -1) {
					this.payList.push({
						id: 1,
						icon: 'icon-weixin-fill',
						color: '#44A860',
						title: '微信支付'
					})
				}
				let alipayInd = this.payList.findIndex(item => {
					return item.id == 3
				})
				if (alipay_status && alipayInd == -1) {
					// #ifndef MP-WEIXIN 
					this.payList.push({
						id: 3,
						icon: 'icon-alipay-fill',
						color: '#3B94F5',
						title: '支付宝支付'
					})
					// #endif
				}
				this.$util.hideAll()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.isLoad = true
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif 
			},
			initRefresh() {
				this.initIndex(true)
			},
			// 去支付
			async toPay() {
				let {
					cash,
					payInd
				} = this

				let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
				if (!cash || !reg.test(cash)) {
					this.$util.showToast({
						title: !cash ? `请输入充值金额` : `请输入正确的充值金额，支持2位小数`
					})
					return
				}

				let {
					id: pay_model
				} = this.payList[payInd]
				let param = {
					cash,
					pay_model
				}


				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					let {
						pay_list,
						order_id,
						order_code
					} = await this.$api.agent.rechargeCash(param)
					this.$util.hideAll()
					if (pay_list) {
						if (pay_model == 3) {
							pay_list = {
								orderInfo: pay_list,
								provider: 'alipay'
							}
						}


						// #ifdef H5
						if (pay_model == 3) {
							let {
								autograph
							} = this
							let alipay_params = `?autograph=${autograph}&id=${order_id}&aliptype=4`
							this.updateOrderItem({
								key: 'alipayOrderParams',
								val: {
									order_id,
									page_url: 1,
									alipay_params
								}
							})
							this.updateOrderItem({
								key: 'haveOperItem',
								val: true
							})
							this.$util.goUrl({
								url: `/user/pages/alipay-result${alipay_params}`,
								openType: `redirectTo`
							})
							return
						}
						// #endif

						// #ifdef APP-PLUS
						if (pay_model === 1 && pay_list.adapay) {
							pay_list = Object.assign(pay_list, {
								type: 4,
								order_code
							})
						}
						// #endif


						try {
							let payResType = await this.$util.pay(pay_list)
							if (payResType === 'adapay_app_wechat') {
								this.lockTap = false
								return
							}
							if (payResType != 'adapay_app_alipay') {
								this.$util.showToast({
									title: `支付成功`
								})
							}
							setTimeout(() => {
								this.lockTap = false
								this.$util.back()
								this.$util.goUrl({
									url: 1,
									openType: `navigateBack`
								})
							}, 1000)
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							this.lockTap = false
							return
						}
					}
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 1000)
				}
			}
		}
	}
</script>


<style lang="scss">
	.user-stored-list {

		.stored-bg {
			width: 100%;
			height: 163rpx;
			border-radius: 0 0 20rpx 20rpx;
			top: 0;
		}

		.record-info {
			.money {
				font-size: 44rpx;
			}

			.record-list {
				.list-item {
					width: 33.33%;
				}
			}

		}

		.store-list {
			.list-item {
				width: 305rpx;
			}
		}

		.pay-btn {
			width: 283rpx;
			height: 90rpx;
		}

		.popup-share {
			.list-item {
				width: 50%;

				.item-image {
					width: 66rpx;
					height: 66rpx;
				}
			}
		}


	}
</style>